<template>
    <div class="hello">
        <div id="page" class="layout">
            <div>
                <!-- 截图区域 -->
                <div class="content" id="content" ref="content"
                     style="background-image: url('https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg')">
                    <div style="width: 500px;height: auto;margin: 0 auto;padding: 0;">
                        <h2 style="margin: auto">this is title!</h2>
                        <img src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg" alt="">
                        <img src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg" alt="">
                        <img src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg" alt="">
                        <img src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg" alt="">
                        <p style="color:green">
                            vue项目中使用html2canvas截图不全的问题
                            原因：横向滚动轮造成，因为html2canvas是根据body进行截图，若内容宽度长于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)
                            Y-SA版权协议，转载请附上原文出处链接及本声明。
                            vue项目中使用html2canvas截图不全的问题
                            原因：横向滚动轮造成，因为html2canvas是根据body进行截图，若内容宽度长于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)
                            解决方案：(首先是获取你要截取页面的父div，通过clone并紧随于body之后，在生成幕布的时候不再拿着父div去截取，而是截取clone的div，这样的话，就可以实现整个页面的截取了。)不能使用跨源的图片。若是使用了，html2canvas将不会读取资源</p>
                    </div>
                </div>
                <!-- 点击调用方法获取截图 -->
                <div>
                    <button class="btn" @click="getPrintScreen">截图预览</button>
                </div>
            </div>
        </div>
        <div>
            <div class="img-box">
                <!-- 通过img标签把获取到的截图呈现出来 -->
                <img :src="imgUri" alt="" crossOrigin="anonymous"/>
            </div>
            <div id="img">
                <button class="btn" @click="getPicState">图片另存为</button>
            </div>
        </div>
    </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
    name: 'HelloWorld',
    data() {
        return {
            imgUri: "", //截图地址
            imgs: [],
            backgrounds: [],
            size: {},
            fileExt: ""
        }
    },
    methods: {
        // 获取截图方法
        getPrintScreen() {
            //处理image标签
            //查找img标签
            this.imgs = document.getElementById('content').querySelectorAll('img');
            if (this.imgs || this.imgs.length > 0) {
                this.imgs.forEach(item => {
                    // 转码
                    let baseCode = this.toBase64(item.src)
                    console.log(baseCode)
                    // 重新赋值给img的src
                    // item.src = baseCode;
                });
            }
            //处理背景图片
            //获取背景图片 document.getElementById('content')
            this.backgrounds = this.$refs.content.style.backgroundImage;
            let baseUrl = this.toBase64(this.backgrounds)
            console.log(baseUrl)
            //重新赋值
            // this.$refs.content.style.backgroundImage.url = baseUrl;
            html2canvas(this.$refs.content).then(canvas => {
                let url = canvas.toDataURL("image/png", 1.0); // toDataURL: 图片格式转成 base64   replace("image/png","image/octet-stream")
                this.imgUri = url;
            })
            //这里可用 $("#content");document.getElementById('content');
            // html2canvas(document.querySelector("#content")).then(canvas =>{
            //     html2canvas(document.querySelector("#content"), {
            //         backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
            //         useCORS: true, //支持图片跨域
            //         tainttest: true,//检测图片已经全部加载完成
            //         scrollX: 0,//解决滚动导致截图不全
            //         scrollY: 0,
            //         scale: 1, //解决高清屏图片模糊
            //         allowTaint: false,//允许污染画布
            //     }).then((canvas) => {
            //         // 把生成的base64位图片上传到服务器,生成在线图片地址
            //         let url = canvas.toDataURL("image/png", 1.0); // toDataURL: 图片格式转成 base64   replace("image/png","image/octet-stream")
            //         this.imgUri = url;
            //         console.log(this.imgUri)
            //     })
            //     console.log(canvas,"fngvjksfdvldf")
            // })
        },
        //图片转码

        // toBase64(img) {
        // html2canvas(images).then(canvas => {
        //     let dataURL = canvas.toDataURL("image/png", 1.0);
        //     return dataURL;
        // })
        /**
         * @param imgUrl 图片链接或者地址
         * @returns {string}
         */
        toBase64(imgUrl) {
            const image = new Image();
            // 解决跨域问题
            image.setAttribute('crossOrigin', 'anonymous');
            const imageUrl = imgUrl;
            image.src = imageUrl;
            image.onload = () => {
                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext('2d');
                context.drawImage(image, 0, 0, image.width, image.height);
                var quality = 1; //图片质量
                // 这里的dataurl就是base64类型
                const dataurl = canvas.toDataURL('image/png', quality);
                return dataurl;
            }
        },


        //下载图片方法
        getPicState() {
            var eleLink = document.createElement('a')
            eleLink.href = this.imgUri // 转换后的图片地址
            eleLink.download = 'pictureName'
            // 触发点击
            document.body.appendChild(eleLink)
            eleLink.click()
            // 然后移除
            document.body.removeChild(eleLink)
        }
        ,
    }
}
</script>
<style scoped>
.layout {
    display: flex;
    justify-content: space-around;
}

.content {
    background-image: url("https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg");
    size: 25px;
}

.content img {
    max-width: 100%;
    object-fit: contain;
}
</style>

